<script setup lang="ts">
defineOptions({
  name: "gasBoardChemicalsStatis"
});

import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import modelBox from "@/views/common/components/modelBox/index.vue";
import { PxCarousel } from "px-ui";
import gasBoardBarItem from "./gasBoardBarItem.vue";
import { queryConsumptionAnalysis } from "@/api/modules/operation";
import { ArrowLeft, ArrowRight, Position } from "@px-ui/icons-vue";

const router = useRouter();

interface Props {
  dark?: boolean;
  height?: number;
}

const props = withDefaults(defineProps<Props>(), { dark: false, height: null });

const loadingBackground = computed(() => (props.dark ? "rgba(0, 30, 59, 0.8)" : undefined));

const carouselRef = ref<InstanceType<typeof PxCarousel> | null>(null);
const carouselIndex = ref<number>(1);
// 图表滚动时间间隔
const carouselInterval = 15000;
const loading = ref<boolean>(false);
const outSideList = ref<Array<any>>([]);

const togglePage = (num: number) => {
  if (num > 0) {
    carouselRef.value?.next();
  } else {
    carouselRef.value?.prev();
  }
};

const carouselChangeHandler = (index: number) => {
  carouselIndex.value = index + 1;
};

const toPage = () => {
  const path = "/gas/consumption/chemical";
  router.push({ path });
};

const init = async () => {
  loading.value = true;
  const params = {
    itemKey: "",
    startDate: "",
    endDate: ""
  };
  const res = await queryConsumptionAnalysis(params);
  outSideList.value = res?.reduce((pre, cur) => {
    const { itemName: name = "", valueList: list = [] } = cur;
    const unit = "L";
    cur = { ...cur, unit, name, list };
    const id = Math.random().toString(36).slice(2, 10);
    if (!pre.length) {
      const inSideList = [cur];
      pre.push({ id, inSideList });
    } else {
      if (pre[pre.length - 1].inSideList?.length === 5) {
        const inSideList = [cur];
        pre.push({ id, inSideList });
      } else {
        pre[pre.length - 1].inSideList?.push(cur);
      }
    }
    return pre;
  }, []) as Array<any>;
  loading.value = false;
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <modelBox title="化学品耗量统计" :borderRadius="false" :dark="dark">
    <template v-if="!dark" #title>
      <div class="toggle">
        <px-tooltip v-if="!dark" effect="dark" content="跳转至化学品耗量统计页面">
          <px-button type="primary" plain text :icon="Position" :disabled="loading" @click="toPage" />
        </px-tooltip>
        <px-tooltip effect="dark" content="上一页">
          <px-button type="primary" plain text :icon="ArrowLeft" :disabled="loading" @click="togglePage(-1)" />
        </px-tooltip>
        <div :class="['carousel-index', dark ? 'carousel-index-dark' : '']">{{ `${carouselIndex} / ${outSideList.length || "1"}` }}</div>
        <px-tooltip effect="dark" content="下一页">
          <px-button type="primary" plain text :icon="ArrowRight" :disabled="loading" @click="togglePage(1)" />
        </px-tooltip>
      </div>
    </template>
    <div v-loading="loading" :element-loading-background="loadingBackground" class="gas-board-chemicals-statis">
      <px-carousel
        v-if="outSideList?.length"
        ref="carouselRef"
        :height="height ? `${height}px` : '162px'"
        :indicator-position="`${dark ? 'outside' : 'none'}`"
        arrow="never"
        :interval="carouselInterval"
        @change="carouselChangeHandler"
      >
        <px-carousel-item v-for="item in outSideList" :key="item.id">
          <div class="statis-carousel-item">
            <div v-for="ite in item.inSideList" :key="ite.name" class="statis-carousel-item-item">
              <gasBoardBarItem :data="ite" line :dark="dark" />
            </div>
          </div>
        </px-carousel-item>
      </px-carousel>
      <div v-else class="statis-default" :style="{ backgroundColor: dark ? 'transparent' : '#fff' }">
        <px-empty class="px-empty-common" :dark="dark" />
      </div>
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-around;

  .px-button {
    font-size: 18px;
  }

  .carousel-index {
    font-size: 13px;
    line-height: 1;
    color: #333;
  }

  .carousel-index-dark {
    color: #ddd;
  }
}

.gas-board-chemicals-statis {
  width: 100%;
  height: 100%;

  .statis-carousel-item {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: center;
    width: 100%;
    height: 100%;

    .statis-carousel-item-item {
      height: 100%;
    }
  }

  .statis-default {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
  }
}
</style>
